<template>
  <div v-if="filmInfo" :class="$route.params.from === 'cinemafilm' || filmInfo.isSale ? '' : 'hideBottom'">
    <i class="iconfont icon-zuojiantou leftBtn" @click="handleBack"></i>
    <detail-header scrolltop="44">{{ filmInfo.name }}</detail-header>
    <div
      class="poster"
      :style="{ backgroundImage: 'url(' + filmInfo.poster + ')' }"
    ></div>
    <div class="film-detail">
      <div class="col">
        <div class="film-name">
          {{ filmInfo.name }}<span>{{ filmInfo.filmType.name }}</span>
        </div>
        <div v-show="filmInfo.grade" class="film-grade">
          <i>{{ filmInfo.grade }}</i
          >分
        </div>
      </div>
      <div class="film-category">
        {{ filmInfo.category | categoryFilter }}
      </div>
      <div class="film-premiere-time">
        {{ filmInfo.premiereAt | dateFilter }}上映
      </div>
      <div class="film-nation-runtime">
        {{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟
      </div>
      <div
        class="film-introduce"
        :style="{'height': calcHeight}"
      >
        <p ref="introduce">{{ filmInfo.synopsis }}</p>
      </div>
      <div
        class="iconfont"
        :class="isOpen ? 'icon-shangjiantou' : 'icon-xiajiantou'"
        style="text-align: center; color: #d1d3d7"
        @click="isShow"
      ></div>
    </div>
    <!-- 演职人员 -->
    <div class="actors">
      <p>演职人员</p>
      <detail-swiper name="actors" class="actor"  :swiperOptions="actorsSwiper">
        <detail-swiper-item
          v-for="(actor, index) in filmInfo.actors"
          :key="index"
        >
          <div
            class="avatar"
            :style="{ backgroundImage: 'url(' + actor.avatarAddress + ')' }"
          ></div>
          <p class="actor-name">{{ actor.name }}</p>
          <p class="actor-role">{{ actor.role }}</p>
        </detail-swiper-item>
      </detail-swiper>
    </div>
    <!-- 剧照 -->
    <div class="photos">
      <div class="photos-title">
        <p>剧照</p>
        <span>全部({{ filmInfo.photos.length }})<i class="iconfont icon-youjiantou" style="font-size:13px;"></i></span>
      </div>
      <detail-swiper name="photos" class="photo" :swiperOptions="photosSwiper">
        <detail-swiper-item
          v-for="(photo, index) in filmInfo.photos"
          :key="index"
        >
          <div
            class="photoUrl"
            :style="{ backgroundImage: 'url(' + photo + ')' }"
            @click="handlePreview(filmInfo.photos, index)"
          ></div>
        </detail-swiper-item>
      </detail-swiper>
    </div>
    <div class="buyBtn" v-if="filmInfo.isSale" @click="handleBuyBtn(filmInfo.filmId)">选座购票</div>
  </div>
</template>

<script>
import http from '@/utils/http'
import obj from '@/utils/mixin'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/components/detail/DetailSwiper.vue'
import detailSwiperItem from '@/components/detail/DetailSwiperItem.vue'
import detailHeader from '@/components/detail/DetailHeader.vue'
import { ImagePreview, Dialog } from 'vant'

moment.locale('zh-cn') // 设置成中文

Vue.filter('dateFilter', (date) => {
  // 卖座的时间戳是以秒为单位，要换成毫秒
  return moment(date * 1000).format('YYYY-MM-DD')
})

Vue.filter('categoryFilter', (category) => {
  return category.replace('|', ' | ')
})

export default {
  mixins: [obj],
  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  },
  // 组件内的路由拦截 (当需要验证的页面较少)
  // beforeRouteEnter (to, from, next) {
  //   if (to.params.isPresale) {
  //     next()
  //   } else {
  //     Dialog.confirm({
  //       message: '该影片目前没有排期，到首页看其他电影吧'
  //     })
  //       .then(() => {
  //         // on confirm
  //         next('/films/nowplaying')
  //       })
  //       .catch(() => {
  //         // on cancel
  //         next()
  //       })
  //   }
  // },
  data () {
    return {
      filmId: '',
      filmInfo: null,
      isOpen: false,
      actorsSwiper: {
        slidesPerView: 3.9,
        freeMode: true
      },
      photosSwiper: {
        slidesPerView: 2.2,
        freeMode: true
      },
      calcHeight: '34px'
    }
  },
  computed: {},
  created () {
    // console.log(this.$route)
    if (this.$route.params.from === 'comingsoon' && !this.$route.params.isPresale) {
      Dialog.confirm({
        message: '该影片目前没有排期，到首页看其他电影吧',
        confirmButtonText: '同意',
        confirmButtonColor: '#FF6C29',
        cancelButtonText: '拒绝'
      })
        .then(() => {
        // on confirm
          this.$router.push('/films/nowplaying')
        })
        .catch(() => {
        // on cancel
        })
    }
  },
  mounted () {
    // console.log(this.$route.params.filmId)
    this.filmId = this.$route.params.filmId

    http({
      url: `/gateway?filmId=${this.filmId}&k=943530`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((response) => {
      console.log(response.data)
      this.filmInfo = response.data.data.film
    })
  },
  methods: {
    handleBuyBtn (filmId) {
      this.$router.push(
        {
          name: 'filmscinemas',
          params: {
            filmId: filmId,
            from: 'detail'
          }
        }
      )
    },
    handleBack () {
      this.$router.back()
    },
    handlePreview (arr, index) {
      ImagePreview({
        images: arr,
        startPosition: index,
        loop: false,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    },
    isShow () {
      this.isOpen = !this.isOpen
      // console.log(this.$refs.introduce.clientHeight)
      if (this.isOpen) {
        this.calcHeight = this.$refs.introduce.clientHeight + 'px'
      } else {
        this.calcHeight = '34px'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.leftBtn {
  color: #4D4F50;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.5);
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  top: 8px;
  left: 7px;
}

.poster {
  width: 100%;
  height: 13.125rem;
  background-position: center;
  background-size: cover;
}

.avatar {
  width: 85px;
  height: 85px;
  background-position: center;
  background-size: cover;
}

.photoUrl {
  width: 150px;
  height: 100px;
  background-position: center;
  background-size: cover;
}

.film-detail {
  padding: 12px 15px 15px;
  background-color: #fff;

  .col {
    display: flex;
    justify-content: space-between;

    .film-name {
      font-size: 18px;

      span {
        font-size: 12px;
        padding: 0 2px;
        color: #fff;
        background-color: #d2d6dc;
        margin-left: 5px;
        border-radius: 2px;
        position: relative;
        top: -2px;
      }
    }

    .film-grade {
      color: #ffb232;
      font-size: 12px;

      i {
        font-size: 18px;
      }
    }
  }

  .film-category,
  .film-premiere-time,
  .film-nation-runtime {
    color: #797d82;
    font-size: 13px;
    margin: 4px 0 0;
  }

  .film-introduce {
    color: #797d82;
    font-size: 13px;
    margin: 12px 0 0;
    line-height: 17px;
    overflow: hidden;
    transition: height 0.5s ease;
  }
}

.actors {
  background-color: #fff;
  margin-top: 10px;
  padding-bottom: 8px;

  p {
    padding: 15px;
  }

  .actor {
    padding: 0 0 0 15px;

    .actor-name {
      font-size: 12px;
      padding: 10px 0 0;
      text-align: center;
      width: 85px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .actor-role {
      font-size: 12px;
      color: #797D82;
      text-align: center;
      padding: 2px 0 0;
      width: 85px;
    }
  }
}

.photos {
  background-color: #fff;
  margin-top: 10px;
  border-bottom: 5px solid #F4F4F4;

  .photos-title {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size:13px;
      color: #797D82;
    }
  }

  .photo {
    padding: 0 0 0 15px;
    height: 115px;
  }
}

.buyBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 49px;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
  z-index: 1;
}

.hideBottom {
  margin-bottom: -49px;
}
</style>
